<template>
	<div class="sidebar" ref='sidebar' data-step="6" data-intro="这里是属性栏!">
		<div id="sidebar-warp">
			<div id="indentButton" @click="toggleSider"></div>
			<p class="title-two">基础属性</p>
			<el-table :cell-style="cellStyle" :header-cell-style="headerStyle" :data="basicProperties" style="width: 300px;margin-left:40px" border @cell-click="tabClick"
			 :row-class-name="tableRowClassName">
				<el-table-column prop="properties" label="属性名"></el-table-column>
				<el-table-column prop="value" label="器件名称">
					<template slot-scope="scope">
						<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '器件名称' && isEdit == 'true'">
							<el-input v-model="scope.row.value" maxlength="300" placeholder="" size="mini" @blur="inputBlur" />
						</span>
						<span v-else>{{ scope.row.value }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="isShow" label="是否显示">
					<template slot-scope="scope">
						<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '是否显示' && isEdit == 'true'">
							<el-select v-model="scope.row.isShow" placeholder="请选择" @change='changeValue'>
								<el-option label="是" value="是">
								</el-option>
								<el-option label="否" value="否">
								</el-option>
							</el-select>
						</span>
						<span v-else>{{ scope.row.isShow }}</span>
					</template>
				</el-table-column>
			</el-table>
			<p class="title-two">模型参数</p>
			<el-table :cell-style="cellStyle" :header-cell-style="headerStyle" :data="modelParameter" style="width: 300px;margin-left:40px;" :height=scrollerHeight
			 border @cell-click="tabClick2" @row-click="clickInput" :row-class-name="tableRowClassName">
				<el-table-column prop="name" label="属性名"></el-table-column>
				<el-table-column prop="value" label="值" width='140'>
					<template slot-scope="scope">
						<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && (iconName=='capacitor'||iconName=='load'||iconName=='load_one'||iconName=='load_two'||iconName=='link'||iconName=='biandian')">
							<el-input v-model="scope.row.value" maxlength="300" placeholder="" @blur="inputBlur" />
						</span>
						<!-- 电动车 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='vehicle'">
							<el-select v-show="scope.row.name == '充电类型'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="高" value="高">
								</el-option>
								<el-option label="中" value="中">
								</el-option>
								<el-option label="低" value="低">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '工作充电'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="是" value="是">
								</el-option>
								<el-option label="否" value="否">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '充电类型'&&scope.row.name != '工作充电'" v-model="scope.row.value" maxlength="300"
							 placeholder="" @blur="inputBlur" />
						</span>
						<!-- 充电站 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='chargeStation'">
							<el-select v-show="scope.row.name == '充电模式'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="有序充电模式" value="有序充电模式">
								</el-option>
								<el-option label="无引导充电模式" value="无引导充电模式">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '充电模式'" v-model="scope.row.value" maxlength="300" placeholder="" @blur="inputBlur" />
						</span>
						<!-- 电池 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='storage'">
							<el-select v-show="scope.row.name == '电池模式'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="电压控制" value="电压控制">
								</el-option>
								<el-option label="功率驱动" value="功率驱动">
								</el-option>
								<el-option label="供应驱动" value="供应驱动">
								</el-option>
								<el-option label="恒定功率因数" value="恒定功率因数">
								</el-option>
								<el-option label="恒定功率" value="恒定功率">
								</el-option>
								<el-option label="恒定电压" value="恒定电压">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '电池状态'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="并网" value="并网">
								</el-option>
								<el-option label="脱网" value="脱网">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '电池模式'&&scope.row.name != '电池状态'" v-model="scope.row.value" maxlength="300"
							 placeholder="" @blur="inputBlur" />
						</span>
						<!-- 母线 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='node'">
							<el-select v-show="scope.row.name == '节点类型'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="平衡节点" value="平衡节点">
								</el-option>
								<el-option label="PV节点" value="PV节点">
								</el-option>
								<el-option label="PQ节点" value="PQ节点">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '节点类型'" v-model="scope.row.value" maxlength="300" placeholder="" @blur="inputBlur" />
						</span>
						<!-- 光伏 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='photovoltaic'">
							<el-select v-show="scope.row.name == '光伏模式'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="供应驱动" value="供应驱动">
								</el-option>
								<el-option label="恒定功率因数" value="恒定功率因数">
								</el-option>
								<el-option label="恒定功率" value="恒定功率">
								</el-option>
								<el-option label="恒定电压" value="恒定电压">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '光伏状态'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="并网" value="并网">
								</el-option>
								<el-option label="脱网" value="脱网">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '面板类型'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="聚光板" value="聚光板">
								</el-option>
								<el-option label="GA-AS薄膜" value="GA-AS薄膜">
								</el-option>
								<el-option label="非晶体硅" value="非晶体硅">
								</el-option>
								<el-option label="多晶体硅" value="多晶体硅">
								</el-option>
								<el-option label="单晶体硅" value="单晶体硅">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '光伏模式'&&scope.row.name != '光伏状态'&&scope.row.name != '面板类型'" v-model="scope.row.value"
							 maxlength="300" placeholder="" @blur="inputBlur" />
						</span>
						<!-- 同步发电机 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='generator'">
							<el-select v-show="scope.row.name == '发电模式'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="恒定有功功率" value="恒定有功功率">
								</el-option>
								<el-option label="恒定功率" value="恒定功率">
								</el-option>
								<el-option label="恒定能量" value="恒定能量">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '发电机状态'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="并网" value="并网">
								</el-option>
								<el-option label="脱网" value="脱网">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '发电机类型'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="星型同步" value="星型同步">
								</el-option>
								<el-option label="同步" value="同步">
								</el-option>
								<el-option label="异步" value="异步">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '发电模式'&&scope.row.name != '发电机状态'&&scope.row.name != '发电机类型'" v-model="scope.row.value"
							 maxlength="300" placeholder="" @blur="inputBlur" />
						</span>
						<!-- 变压器 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='transformer'">
							<el-select v-show="scope.row.name == '连接方式'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="三角形-星型连接" value="三角形-星型连接">
								</el-option>
								<el-option label="三角形-三角形连接" value="三角形-三角形连接">
								</el-option>
								<el-option label="星型-星型连接" value="星型-星型连接">
								</el-option>
								<el-option label="未知" value="未知">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '安装类型'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="拱顶式" value="拱顶式">
								</el-option>
								<el-option label="落地式" value="落地式">
								</el-option>
								<el-option label="杆顶式" value="杆顶式">
								</el-option>
								<el-option label="未知" value="未知">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '连接方式'&&scope.row.name != '安装类型'" v-model="scope.row.value" maxlength="300"
							 placeholder="" @blur="inputBlur" />
						</span>
						<!-- 风电 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='windPower'">
							<el-select v-show="scope.row.name == '风电状态'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="并网" value="并网">
								</el-option>
								<el-option label="脱网" value="脱网">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '风电类型'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="同步" value="同步">
								</el-option>
								<el-option label="异步" value="异步">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '风电模式'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="恒定能量输出" value="恒定能量输出">
								</el-option>
								<el-option label="恒定有功输出" value="恒定有功输出">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '风电模型'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="美国伯吉公司10kW风机" value="美国伯吉公司10kW风机">
								</el-option>
								<el-option label="美国通用电气25MW风机" value="美国通用电气25MW风机">
								</el-option>
								<el-option label="丹麦维斯塔斯1.6MW风机" value="丹麦维斯塔斯1.6MW风机">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '风电状态'&&scope.row.name != '风电类型'&&scope.row.name != '风电模式'&&scope.row.name != '风电模型'"
							 v-model="scope.row.value" maxlength="300" placeholder="" @blur="inputBlur" />
						</span>
						<!-- 轨道交通 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='guidao'">
							<el-select v-show="scope.row.name == '能馈系统'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="关闭" value="关闭">
								</el-option>
								<el-option label="打开" value="打开">
								</el-option>
							</el-select>
							<el-select v-show="scope.row.name == '运行速度'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="80" value="80">
								</el-option>
								<el-option label="100" value="100">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '能馈系统'&&scope.row.name != '运行速度'" v-model="scope.row.value" maxlength="300"
							 placeholder="" @blur="inputBlur" />
						</span>
						<!-- 断路器 -->
						<span v-else-if="scope.row.index === tabClickIndex && tabClickLabel === '值' && isEdit == 'true' && iconName=='duanlu'">
							<el-select v-show="scope.row.name == '状态'" v-model="scope.row.value" placeholder="请选择" @change='changeValue1'>
								<el-option label="关闭" value="关闭">
								</el-option>
								<el-option label="打开" value="打开">
								</el-option>
							</el-select>
							<el-input v-show="scope.row.name != '状态'" v-model="scope.row.value" maxlength="300" placeholder="" @blur="inputBlur" />
						</span>
						<!-- 线路 -->
						<span v-else>{{ scope.row.value }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="unit" label="单位" width='60'></el-table-column>
				<!-- <el-table-column prop="isShow" label="显示" width='70'>
					<template slot-scope="scope">
						<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '显示' && isEdit == 'true'">
							<el-select v-model="scope.row.isShow" placeholder="请选择" @change='changeValue'>
								<el-option v-if="scope.row.name!='A相电压'&&scope.row.name!='B相电压'&&scope.row.name!='C相电压'"
								 label="是" value="是">
								</el-option>
								<el-option v-if="iconName=='node'&&(scope.row.name=='A相电压'||scope.row.name=='B相电压'||scope.row.name=='C相电压')"
								 label="幅值+相角" value="幅值+相角">
								</el-option>
								<el-option v-if="iconName=='node'&&(scope.row.name=='A相电压'||scope.row.name=='B相电压'||scope.row.name=='C相电压')"
								 label="复数形式" value="复数形式">
								</el-option>
								<el-option v-if="iconName=='node'&&(scope.row.name=='A相电压'||scope.row.name=='B相电压'||scope.row.name=='C相电压')"
								 label="标幺值" value="标幺值">
								</el-option>
								<el-option label="否" value="否">
								</el-option>
							</el-select>
						</span>
						<span v-else>{{ scope.row.isShow }}</span>
					</template>
				</el-table-column> -->
			</el-table>
		</div>
	</div>
</template>
<script>
	import axios from 'axios';
	export default {
		props: {
			icon: String,
			text: String,
			keyValue: String,
			pos:String,
			modelParameterData: Array,
			isEdit: String
		},
		data() {
			return {
				value: "",
				tabClickIndex: null, // 点击的单元格
				tabClickLabel: '', // 当前点击的列名
				//基础属性
				basicProperties: [],
				//模型参数
				modelParameter: [],
				position:"",
				active: false,
				switch_valueA: "",
				switch_valueB: "",
				switch_valueC: "",
				rowName: "",
				iconName: "",
				power: "",
			};
		},
		watch: {
			icon: function(a, b) { //a是value的新值，b是旧值
				this.iconName = a;
			},
			text: function(a, b) {
				// this.changeText(a)
			},
			keyValue: function(a, b) {
				console.log(a)
				this.$nextTick(function() {
					this.basicProperties[0].value = a;
					this.basicProperties[1].value = a;
				})
			},
			pos:function(a,b){
				this.position = a;
				console.log(a)
			},
			isEdit: function(a, b) {
				console.log(a, b)
			},
			modelParameterData: function(a, b) {
				console.log(a)
				if (a) {
					this.basicProperties = a.slice(-2);
					this.modelParameter = a.slice(0, -2);
				}
				let _this = this;
				let current = '10+5j',
					volt = '200+70j';
				//计算复数
				function complexNumberMultiply(a, b) {
					const real1 = parseInt(a.split('+')[0]),
						real2 = parseInt(b.split('+')[0]),
						vir1 = parseInt(a.split('+')[1].split('j')[0]),
						vir2 = parseInt(b.split('+')[1].split('j')[0]);
					let resreal = (real1 * real2 - vir1 * vir2).toFixed(2),
						resvir = (real1 * vir2 + real2 * vir1).toFixed(2);
					return resreal + '+' + resvir + 'j';
				};
				//电动汽车
				// if (_this.iconName == 'vehicle') {
				// 	this.power = complexNumberMultiply(current, volt);
				// 	_this.modelParameter[1].value = complexNumberMultiply(current, volt)
				// }
			},
		},
		created() {},
		mounted() {},
		computed: {
			//计算右侧表格高度
			scrollerHeight: function() {
				return (window.innerHeight - 100 - 180 - 100);
			}
		},
		methods: {
			headerStyle(){
				return "text-align:center"
			},
			cellStyle() {
				return "backgroundColor:rgb(0,11,35);color:#ccc;height:30px;text-align:center"
			},
			changeValue(row, event, column) {
				console.log(row)
				let _this = this;
				//改变母线参数
				if (_this.iconName == 'node' && (row == '幅值+相角' || row == '复数形式' || row == '标幺值')) {
					let modelData = this.modelParameter;
					console.log(modelData)
					let nominal_voltage = 0;
					for (let i = 0; i < modelData.length; i++) {
						if (modelData[i].name == '基准电压') {
							nominal_voltage = parseFloat(modelData[i].value);
						}
					}
					let pluralData = this.modelParameter[this.tabClickIndex].value;
					console.log(pluralData)
					_this.switch_valueA = _this.switch_valueB = _this.switch_valueC = '0.00+28.8427j'
					let newArray = '';
					if (this.rowName == 'A相电压') {
						newArray = _this.switch_valueA;
					} else if (this.rowName == 'B相电压') {
						newArray = _this.switch_valueB;
					} else if (this.rowName == 'C相电压') {
						newArray = _this.switch_valueC;
					} else {
						newArray = '0.00+28.8427j';
					}
					let arr = newArray.match(/\d+(.\d+)?/g);
					console.log(arr)
					let amplitude = Math.sqrt(arr[0] * arr[0] + arr[1] * arr[1]); //幅值
					if (row == '幅值+相角') {
						let phaseAngle = Math.atan(arr[1] / arr[0]).toFixed(6); //相角
						this.modelParameter[this.tabClickIndex].value = amplitude + '+∠' + phaseAngle;
						this.modelParameter[this.tabClickIndex].unit = 'V+弧度'
					} else if (row == '复数形式') {
						this.modelParameter[this.tabClickIndex].value = newArray;
						this.modelParameter[this.tabClickIndex].unit = 'V'
					} else if (row == '标幺值') {
						this.modelParameter[this.tabClickIndex].value = (amplitude / nominal_voltage).toFixed(6);
						this.modelParameter[this.tabClickIndex].unit = 'p.u'
					}
				}
				//改变电动汽车参数
				if (_this.iconName == 'vehicle' && (row == '复数形式' || row == '视在功率')) {
					let newArray = '';
					newArray = _this.power;
					let arr = newArray.match(/\d+(.\d+)?/g);
					let amplitude = Math.sqrt(arr[0] * arr[0] + arr[1] * arr[1]); //幅值
					if (row == '视在功率') {
						let phaseAngle = Math.atan(arr[1] / arr[0]).toFixed(6); //相角
						this.modelParameter[this.tabClickIndex].value = amplitude.toFixed(6);
						this.modelParameter[this.tabClickIndex].unit = 'W'
					} else if (row == '复数形式') {
						this.modelParameter[this.tabClickIndex].value = newArray;
						this.modelParameter[this.tabClickIndex].unit = 'W'
					}
				}

				this.$forceUpdate();
				this.inputBlur(row, event, column)
			},
			changeValue1(row, event, column) {
				let _this = this;
				let newArray = [];
				newArray = this.modelParameter.concat(this.basicProperties)
				console.log(this.modelParameter)
				if (this.iconName != 'link') {
					this.$emit('modelArray', newArray)
				} else {
					this.$emit('linkArray', newArray)
				}
				console.log(row)
				//改变充电站参数
				if (_this.iconName == 'guidao') {
					if (row == '关闭') {
						setTimeout(function() {
							_this.modelParameter[5].value = '296744.85'; //日运行成本
							_this.modelParameter[6].value = '430065'; //耗能
						}, 2000)
					} else if (row == '打开') {
						setTimeout(function() {
							_this.modelParameter[5].value = '236592.03'; //日运行成本
							_this.modelParameter[6].value = '342887'; //耗能
						}, 2000)
					}
				}
				this.$forceUpdate();
				this.tabClickIndex = null;
				this.tabClickLabel = '';
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				// 把每一行的索引放进row
				row.index = rowIndex;
				if (row.properties=='标签') {
				  return 'hidden-row';
				}
			},
			tabClick(row, column, cell, event) {
				console.log(row)
				switch (column.label) {
					case '器件名称':
						this.tabClickIndex = row.index
						this.tabClickLabel = column.label
						this.$nextTick(() => {
							let b = document.getElementsByClassName('el-input__inner');
							for (let i = 0; i < b.length; i++) {
								b[i].focus()
							}
						})
						break
					case '是否显示':
						this.tabClickIndex = row.index
						this.tabClickLabel = column.label
						break
					default:
						return
				}
			},
			tabClick2(row, column, cell, event) {
				this.rowName = row.name;
				switch (column.label) {
					case '值':
						this.tabClickIndex = row.index
						this.tabClickLabel = column.label
						this.$nextTick(() => {
							let b = document.getElementsByClassName('el-input__inner');
							for (let i = 0; i < b.length; i++) {
								b[i].focus()
							}
						})
						break
					case '显示':
						this.tabClickIndex = row.index
						this.tabClickLabel = column.label
						break
					default:
						return
				}
			},
			clickInput(row, event, column) {
				if (column.label === '值') { // 行中对应的某一个cell
					console.log(event)

				}
			},
			inputBlur(row, event, column) {
				let newArray = [];
				newArray = this.modelParameter.concat(this.basicProperties)
				console.log(this.modelParameter)
				if (this.iconName != 'link') {
					this.$emit('modelArray', newArray)
				} else {
					this.$emit('linkArray', newArray)
				}
				this.tabClickIndex = null;
				this.tabClickLabel = '';
			},
			toggleSider(e) {
				if (this.active == true) {
					this.active = false;
					this.$refs.sidebar.style.right = "0px";
					this.$parent.toggleWidth1();
				} else {
					this.active = true;
					this.$refs.sidebar.style.right = "-315px";
					this.$parent.toggleWidth();
				}
			},
			changeText(text) {
				// this.basicProperties[1].value = text;
				// this.basicProperties[1].name = text;
			}
		}
	};
</script>

<style scoped>
	.sidebar {
		overflow: hidden;
		background-image: url(../../assets/img/rightSideBack.png);
		background-repeat: no-repeat;
		background-size: 99% 100%;
		display: block;
		position: absolute;
		right: 0;
		top: 52px;
		bottom: 20px;
		/* overflow-y: scroll; */
		width: 350px;
		height: 92%;
		z-index: 3;
		transition-duration: .5s
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 350px;
	}

	#sidebar-warp {
		overflow: hidden;
		width: 100%;
		height: 100%;
		margin-top: 40px;
	}

	.el-tabs.el-tabs--top.el-tabs--border-card {
		height: 100%
	}

	.el-tabs__content {
		height: 95%
	}

	.sidebar>ul {
		height: 100%;
	}

	.title {
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		background: #c2dbf2;
	}

	i {
		font-size: 30px;
		float: left;
		line-height: 40px;
		cursor: pointer;
	}

	.sidebar>>>.el-input__inner {
		padding: 0 !important;
		height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sidebar>>>.el-input--small .el-input__inner {
		height: 20px;
	}

	.sidebar>>>.el-tabs__header .is-top {
		height: 0
	}

	.sidebar>>>.el-table .cell {
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: keep-all;
		line-height: 23px;
		padding-right: 10px;
	}

	#indentButton {
		width: 30px;
		height: 140px;
		z-index: 9999;
		position: absolute;
		top: 43%;
		margin-left: 2px;
		transform: rotate(180deg);
		/* margin-left:215px; */
		background-image: url(../../assets/img/arrow_blue.png);
		background-size: 100% 100%;
		cursor: pointer;
	}

	#indentButton:hover {
		width: 30px;
		height: 140px;
		z-index: 9999;
		position: absolute;
		top: 43%;
		margin-left: 2px;
		transform: rotate(180deg);
		/* margin-left:215px; */
		background-image: url(../../assets/img/arrow_red.png);
		background-size: 100% 100%;
		cursor: pointer;
	}

	.el-tabs.el-tabs--top.el-tabs--border-card {
		background-color: transparent;
	}

	.title-two {
		height: 20px;
		width: 290px;
		color: #ECECEC;
		margin-top: 30px;
		margin-left: 40px;
		padding-left: 10px;
		background-color: rgb(41, 109, 157);
	}

	.el-table,
	.el-table__expanded-cell {
		background-color: transparent !important;
	}
	
	.sidebar>>>.el-table .hidden-row {
	    display: none!important;
	  }

	.sidebar>>>.el-table__header th,
	.el-table__header tr {
		background-color: rgb(0, 11, 35) !important;
		color: #ccc;
	}

	.sidebar>>>.el-table--border,
	.el-table--group {
		border: 1px solid rgb(30, 101, 148);
	}

	.sidebar>>>.el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid rgb(30, 101, 148)
	}

	.sidebar>>>.el-table--border td,
	.el-table--border th,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-t {
		border-right: 1px solid rgb(30, 101, 148)
	}

	.sidebar>>>.el-table--border th,
	.el-table__fixed-right-patch {
		border-right: 1px solid rgb(30, 101, 148)
	}

	.sidebar>>>.el-table--border th,
	.el-table__fixed-right-patch {
		border-bottom: 1px solid rgb(30, 101, 148)
	}
</style>
